<template>
	<view >
		<!-- 状态栏高度 设置背景色 占位状态栏-->
		<view class="ztl"
			:style="{'height':statusBarHeight}"></view>
		<!-- 占位盒子 -->
		<view class=""
			:style="{'height': hieght}"></view>
		<!-- 导航栏 -->
		<navBar bgColor="#FFF">
			<image :slot="'left'"
				@click='navToBack'
				:src="xcxImgUrl && xcxImgUrl+'fanhui.svg'"
				style="width: 36rpx;height: 36rpx;"></image>
			<text :slot="'content'">新增/修改地址</text>
		</navBar>

		<view class="main_addAddress"
			:style="{'height': 'calc(100vh - ' + demoTopHieght +')'}">
			<!-- 选择项 -->
			<u-cell-group class="group mb10">
				<u-cell>
					<view slot="title"
						class="u-slot-title">
						<text class="u-cell-text">姓名</text>
					</view>
					<view slot="value"
						class="u-slot-value">
						<u--input inputAlign='right'
							border='none'
							maxlength='16'
							v-model='addressInfo.name'
							placeholder="请输入姓名"></u--input>
					</view>
				</u-cell>
				<u-cell>
					<view slot="title"
						class="u-slot-title">
						<text class="u-cell-text">手机号码</text>
					</view>
					<view slot="value"
						class="u-slot-value">
						<u--input inputAlign='right'
							border='none'
							type="number"
							maxlength="11"
							v-model='addressInfo.phone'
							placeholder="请输入手机号码"></u--input>
					</view>
				</u-cell>
				<u-cell  isLink>
					<view slot="title"
						class="u-slot-title">
						<text class="u-cell-text">所在地区</text>
					</view>
					<view slot="value"
						class="u-slot-value"
						style="display: flex;
						color: #333;
						justify-content: flex-end;">
						<picke<!-- r mode="region" @change="changeCity">
							<input type="text" disabled v-model="diqu" placeholder="请选择地区" placeholder-style="text-align:center">
						</picker> -->
						<view @click="changeCity">
							<input type="text" disabled v-model="diqu" placeholder="请选择地区" placeholder-style="text-align:center">
						</view>
						<!-- <view>
							{{diqu}}
						</view> -->
						<!-- <u--input inputAlign='right'
							border='none'
							v-model="diqu"
							placeholder="请选择地区">
						</u--input> -->
						<!-- <u-icon 
						
						name="arrow-right"></u-icon> -->
					</view>
				</u-cell>
				<u-cell>
					<view slot="title"
						class="u-slot-title area">
						<text class="u-cell-text">详细地址</text>
						<u--textarea 
							border='none'
							height="100rpx"
							confirmType='done'
							autoHeight 
							v-model='addressInfo.address'
							placeholder="请输入详细地址"></u--textarea>
					</view>
				</u-cell>
			</u-cell-group>
<!-- 			@click="checkrdAddress" -->
			<view 
			class="main_addAddress_moren">
				<!-- <checkbox color="#ec4141"
					:checked="checked"
					style="transform:scale(0.7)" /> -->
					<view class="custom_checkbox" :class="{active : checked[0]}">
						<u-checkbox-group v-model="checked" @change="checkrdAddress">
						<u-checkbox
							:name="true"></u-checkbox>
						</u-checkbox-group>
					</view>
					设置为默认地址
			</view>
			<view 
			@click="save"
			style="margin-top: 50rpx;">
				<newBtn name="保存"
					bg-color="#F33340"
					color="#FFF"></newBtn>
			</view>
		</view>

		<!-- 省市区选择器 -->
		<view class="ssq">
			<u-picker @cancel="cancel"
				:show="ssqShow"
				ref="uPicker"
				:columns="columns"
				keyName="name"
				@confirm="confirm"
				@change="changeHandler"></u-picker>
		</view>
		
		
		<!-- 模态框确认 -->
		<u-modal 
		:show="modalShow" 
		:title="modalInfo.title" 
		showConfirmButton
		showCancelButton
		@confirm='modalConfirm'
		@cancel='modalShow = false'
		:content='modalInfo.content'>
		
		</u-modal>
	</view>
</template>

<script>
	import {addOrUpdateMallCustomerAddress} from '@/api/setting.js'
	import {
		mapGetters
	} from 'vuex'
	import newBtn from '@/components/newBtn/newBtn.vue'
	import address from '@/utils/address.json'
	export default {
		computed: {
			...mapGetters(['demoTopHieght']),
		},
		components: {
			newBtn
		},
		data() {
			return {
				statusBarHeight: "",
				hieght: '',
				ssqShow: false, //省市区弹出层
				columns: [], //省份数据显示，三级联动需要三维数组，展示初始数据
				columnData: [], //市数据
				columnDatas: [], //区地址
				addressInfo:{
					name:'',//名称
					phone:'',//手机号码
					province:'',//省
					city:'',//市
					area:'',//区县
					address:'',//详细地址、
					type:'2',//是否默认收货地址[1：是 2：否]
					addressId:'',//收货地址id
				},
				diqu:'',//省市区接收回显
				checked:false,//默认地址
				modalShow:false,//模态框
				modalInfo:{ //模态框提示对象内容
					title:'',
					content:''
				}
			};
		},
		onLoad(options) {
			//编辑时回显
			let addressItem = options.addressItem ? JSON.parse(decodeURIComponent(options.addressItem)) : {};
			if(JSON.stringify(addressItem) != "{}"){
				this.updInit(addressItem)
			}
			
			//初始化省份列表
			this.initDataPicker() 
		},
		onShow() {
			this.$nextTick(() => {
				// 获取状态栏的高度
				this.statusBarHeight = this.$store.state.statusBarHeight * 2 + 'rpx'
				// 计算站位的高度
				this.hieght = (this.$store.state.navBarHeight) * 2 + 'rpx'
				//获取高度
				this.Utils.getDemoTopHeight('main_addAddress')
			})
		},
		methods: {
			//返回上一级
			navToBack(){
				// uni.navigateTo({
				// 	url:'/page_setting/harvestAddress'
				// })
				uni.navigateBack()
			},
			//初始化省市区
			initDataPicker() {
				//此处的province主要用作数据的初始化，即刚打开就需要进行展示的数据，这个跟第一条省份数据相关，我的第一条是北京市，所以需要columns中的三维数组，第一维度是省份数据数组，第二维度是市数据数组，第三维度是区数据数组
				let province = []; //初始数据需要展示的省份
				let province1 = [{
					name: '市辖区',
					code: '1101'
				}]; //因为第一个市北京市，所以就直接添加北京市下辖的直辖市了 也即初始数据需要展示的市，北京市只有一个市辖区
				let province2 = []; //初始数据需要展示的区域数据，也即是 北京市市辖区内的区
				address.map(item => {
					province.push({name: item.name, code: item.code});
				});

				address[0].children[0].children.map(item => {
					province2.push({name: item.name, code: item.code});
				});

				//省数据 因为要做数据初始化，所以是三维数组 
				// 数据格式 [ [所有的省份数据:{},{}] , [第一个省份下的所有的市:{},{},{}] , [第一个市下面所有的区:{},{},{}] ]
				this.columns.push(province);
				this.columns.push(province1);
				this.columns.push(province2);

				// 市数据数组，筛选address.json文件，将全国所有省下面的市数据放入数组
				// 格式[ [第一个省下面所有市,{},{},{}] , [第二个省下面所有市{},{},{}] , [第三个省下面所有市{},{},{}] ] 注意，以上的第一第二对应着 columns[0] 的数据

				address.map(item => {
					let city = [];
					item.children.map(item1 => {
						city.push({name: item1.name, code: item1.code});
					});
					this.columnData.push(city);
				});
               console.log(this.columnData[0])
				//区数据数组
				//数据格式: [ 所有省下面所有市的所有区 [ 第一个省下面所有市的区:[ [第一个省下面第一个市的所有区] , [第一个省下面第二个市的所有区] ,]   ,   [ 第二个省下面所有市的区:[ [第二个省下面第一个市的所有区] , [第二个省下面第二个市的所有区] ,]   ]

				let area = [];
				address.map((item, index) => {
					let area1 = []; //省下面所有市的初始化
					item.children.map(item1 => {
						area = []; //市下面的区初始化
						item1.children.map(item2 => {
							area.push({name: item2.name, code: item2.code});
						});
						area1.push(area); // 每循环一个市，添加该市下面的所有区
					});
					this.columnDatas.push(area1); // 每循环一个省，添加该省下面的所有市
				});
				console.log(this.columnDatas[0])
			},
			//城市选择时触发
			changeHandler(e) {
				const {
					columnIndex, //当前选择的列，省 / 市 / 区
					value, // 当前选择的数组内容
					values, // values为当前变化列的数组内容
					index, // 当前列的下标值
					indexs, // 当前选择 省 市 区的下表值
					picker = this.$refs.uPicker
				} = e;
				// 当第一列值发生变化时，变化第二列和第三列的值（省份变更，市和区跟着变更）
				if (columnIndex === 0) { // 判断当前变更的是省还是市还是区
					// picker为选择器this实例，变化第二列对应的选项
					picker.setColumnValues(1, this.columnData[
						index]); //设置市为该省下面的所有市，index是当前省在省份数组的下标，对应市数组中的下表就是 该省下面的所有市 的数据
					picker.setColumnValues(2, this.columnDatas[index][0]); // 设置区域为该省下面第一个市下面的所有区域
				}
				if (columnIndex === 1) {
					// 当第二列发生变化 变化对应的第三列 
					picker.setColumnValues(2, this.columnDatas[indexs[0]][index]); //同上
				}
			},
			changeCity(e){
				// console.log(e)
				// this.diqu = e.detail.value.map(item=>item).join('/')//回显
				// this.addressInfo.province = e.detail.value[0] || ''
				// this.addressInfo.city = e.detail.value[1] || ''
				// this.addressInfo.area = e.detail.value[2] || ''
				this.ssqShow = true
			},
			//点击确定按钮
			confirm(e) {
				console.log(e)
				// 保存省市区
				this.diqu = e.value.map(item=>item.name).join('/')//回显
				this.addressInfo.province = e.value && e.value.length && e.value[0].name ? e.value[0].name : ''
				this.addressInfo.city = e.value && e.value.length && e.value[1].name ? e.value[1].name : ''
				this.addressInfo.area = e.value && e.value.length && e.value[2].name ? e.value[2].name : ''
				this.ssqShow = false;
			},
			//点击取消按钮
			cancel() {
				this.ssqShow = false;
			},
			//点击选择默认
			checkrdAddress(e){
				this.checked = e;
				this.addressInfo.type = this.checked[0] ? 1 : 2
			},
			//点击保存
			save(){
				//校验名称是否必填
				if(this.addressInfo.name == ''){
					this.Utils.toast('请填写姓名！')
					return
				}
				// 校验手机号
				if(this.addressInfo.phone == ''){
					this.Utils.toast('请填写手机号码！')
					return
				}
				if(this.addressInfo.phone.length != 11){
					this.Utils.toast('手机号码长度有误！')
					return
				}
				let regPhone = /^1[3456789]{1}\d{9}$/; //手机正则
				if(!regPhone.test(this.addressInfo.phone)){
					this.Utils.toast('手机号码格式有误！')
					return
				}
				//校验地址是否填写
				if(this.diqu == ''){
					this.Utils.toast('请选择省市区！')
					return
				}
				if(this.addressInfo.address == ''){
					this.Utils.toast('请填写详细地址！')
					return
				}
				//显示模态框
				this.modalShow = true;
				this.modalInfo.title = '温馨提醒';
				this.modalInfo.content = '是否保存当前收货地址信息？？？';
				
			},
			//二次保存确认
			async modalConfirm(){
				this.modalShow = false;
				let res = await addOrUpdateMallCustomerAddress(this.addressInfo)
				console.log(res)
				if(res.code == 2000){
					this.Utils.toast('保存成功');
					setTimeout(()=>{
						// uni.navigateTo({
						// 	url:'/page_setting/harvestAddress'
						// })
						uni.navigateBack()
					},500)
				}else{
					this.Utils.toast(`${res.msg}`)
				}
			},
			//编辑回显
			updInit(item){
				console.log(item)
				this.addressInfo={
					name:item?.name || '',
					phone:item?.phone || '',
					province:item?.province || '',
					city:item?.city || '',
					area:item?.area || '',
					address:item?.address || '',
					type:item?.type || 2,
					addressId:item?.addressId || ''
				}
				//单独回显省市区 默认地址
				this.diqu = item?.province + '/' + item?.city + '/' + item?.area 
				console.log(this.diqu)
				this.checked = item.type && item.type == 1 ? true : false 
			}
			
		}
	}
</script>

<style lang="scss"
	scoped>
	/deep/.u-picker__view__column__item {
	font-size: 15px !important;
	white-space: nowrap; /* 防止文本换行 */
	overflow: hidden;    /* 隐藏超出部分 */
	text-overflow: ellipsis; /* 显示省略号 */
	}
	  /deep/.u-modal__button-group__wrapper--confirm.u-modal__button-group__wrapper--confirm  {
	  	background-color: #ec4141;
	  	
	  	.u-modal__button-group__wrapper__text {
	  		color: #FFF !important;
	  	}
	  }
	.main_addAddress {
		width: 100%;
		box-sizing: border-box;
		overflow-y: scroll;

		.group {
			background-color: #FFF;

			.u-cell-text {
				font-size: $font_size_14;
				color: $text_color_333;
			}

			.u-slot-value {
				width: 60%;
				text-align: right;
				font-size: $font_size_14;
				color: $text_color_808080;
			}

		}
	}

	/deep/ .area .u-input__content {
		height: 200rpx !important;
	}

	.main_addAddress_moren {
		width: 100%;
		padding: 20rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		font-size: $font_size_14;
		color: $text_color_333;
	}

	/deep/.ssq .u-picker__view{
		height: 360rpx!important;
	}
	// /deep/.ssq .uni-picker-view-indicator{
	// 	height: 88rpx!important;
	// 	top: 0!important;
	// 	transform: translateY(0)!important;
	// }
	// /deep/.ssq .u-picker__view__column__item{
	// 	height: 88rpx!important;
	// 	line-height: 88rpx!important;
	// }
	// /deep/.ssq .uni-picker-view-content{
	// 	padding: 0!important;
	// }
	// /deep/.ssq .uni-picker-view-content{
	// 	transform: translateY(0)!important;
	// }
</style>